<template>
    <div>
        <div style="margin-top: 10px;display: flex;justify-content: center">
            <el-input size="small" type="text"
                      prefix-icon="el-icon-search"
                      style="width: 400px;margin-right: 5px" placeholder="通过用户名搜索用户..." v-model="hr.name"/>
            <el-button icon="el-icon-search" size="small" type="primary" @click="getHrs">搜索</el-button>
        </div>
        <div class="hr-container">
            <el-card class="hr-card" v-for="item in hrs" :key="item.id">
                <div slot="header" class="clearfix">
                    <span>{{item.name}}</span>
                    <el-button style="float: right; padding: 3px 0;color: #e30007;" type="text"
                               icon="el-icon-delete"></el-button>
                </div>
                <div>
                    <div class="img-container">
                        <img :src="item.userface" class="userface-img"/>
                    </div>
                    <div class="userinfo-container">
                        <div>用户名：{{item.username}}</div>
                        <div>手机号码：{{item.phone}}</div>
                        <div>电话号码：{{item.telephone}}</div>
                        <div>地址：{{item.address}}</div>
                        <div>
                            用户状态：
                            <el-switch @change="changeEnabled(item)" v-model="item.enabled" active-color="#13ce66"
                                       inactive-color="#ff4949">

                            </el-switch>
                        </div>
                        <div>
                            用户角色：
                            <el-tag style="margin-left: 5px" size="mini" v-for="role in item.roles" type="success"
                                    :key="role.id">{{role.namezh}}
                            </el-tag>
                            <el-popover
                                    placement="right"
                                    width="200"
                                    trigger="click"
                                    @show="getRoles"
                                    @hide="updateRole(item.id)">
                                <el-select v-model="ids" multiple placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in roles"
                                            :key="item.id"
                                            :label="item.namezh"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-button icon="el-icon-more" slot="reference" type="text"></el-button>
                            </el-popover>
                        </div>
                    </div>

                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SysHr",
        data: function () {
            return {
                hrs: [],
                hr: {
                    name: ''
                },
                ids: [],
                roles: []
            }
        },
        methods: {
            init() {
                this.$getRequest('/vhr/system/hrs')
                    .then(res => {
                        if (res) {
                            this.hrs = res.obj
                        }
                    })
            },
            changeEnabled(item) {
                this.$putRequest('/vhr/system/hrs/' + item.id + '/' + item.enabled)
                    .then(res => {
                        if (res) {
                            this.init()
                        }
                    })
            },
            getHrs() {
                this.$getRequest('/vhr/system/hrs', this.hr)
                    .then(res => {
                        if (res) {
                            this.hrs = res.obj
                        }
                    })
            },
            getRoles(){
                this.ids = []
                this.$getRequest('/vhr/role')
                .then(res => {
                    this.roles = res.obj
                })
            },
            updateRole(id){
                console.log(id);
                this.$putRequest('/vhr/system/roles',{rid:id,ids:this.ids})
                    .then(res => {
                        if (res){
                            this.init()
                        }
                    })
            }
        },
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>
    .userinfo-container div {
        font-size: 12px;
        color: #409eff;
    }

    .userinfo-container {
        margin-top: 20px;
    }

    .img-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .userface-img {
        width: 72px;
        height: 72px;
        border-radius: 72px;
    }

    .hr-container {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .hr-card {
        width: 350px;
        margin-bottom: 20px;
    }
</style>